import { Form, Input, message } from 'antd';
import CommonModal from '../../../../components/common/CommonModal';
import React, { useEffect, useState } from 'react';
import { addUser, getUserList, getUserDetail, editUser, deleteUser, updateUserStatus, resetPassword } from 'apis/user';

export default (props):JSX.Element => {
    const [formData, setFormData] = useState({});
    const [newPassword, setNewPassword] = useState('');

    // 重置密码弹框
    const { visible, setVisible, userId } = props;

    const onSubmit = (data, loadinCallback?: () => void, closeModalCallback?: () => void) => {
        console.log(data);
        resetPassword({ newPasswd: data.newPassword, id: userId })
            .then((res) => {
                message.success('密码重置成功');
                loadinCallback?.();
                closeModalCallback?.();
            })
            .finally(() => {
                loadinCallback?.();
            });
    };

    return (
        <CommonModal
            title='重置密码'
            width={600}
            styles={{ body: { marginTop: '20px', marginBottom: '20px' } }}
            open={visible}
            close={() => {
                setVisible(false);
            }}
            formSetting={{ labelCol: { span: 4 }, wrapperCol: { span: 20 } }}
            onSubmit={onSubmit}
            initFormData={formData}
        >
            <Form.Item
                name='newPassword'
                label='新密码'
                rules={[
                    { required: true, message: '请输入新密码' },
                    {
                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
                        message: '请输入正确的密码格式！密码格式为字母+数字形式，长度为8到16位!',
                    },
                ]}
            >
                <Input.Password
                    onChange={(e) => setNewPassword(e.target.value)}
                    placeholder='请输入新密码'
                    maxLength={16}
                />
            </Form.Item>
            <Form.Item
                name='confirmPassword'
                label='确认密码'
                rules={[
                    { required: true, message: '请输入确认密码' },
                    () => ({
                        validator(_, value) {
                            console.log(value, newPassword);
                            if (!value || value == newPassword) {
                                return Promise.resolve();
                            }
                            return Promise.reject(new Error('密码输入不一致！'));
                        },
                    }),
                ]}
            >
                <Input.Password placeholder='请输入确认密码' maxLength={16} />
            </Form.Item>
        </CommonModal>
    );
};
